import '@/App.css'
import { AuthProvider } from '@/contexts/AuthContext';
import ProtectedRoute from '@/components/ProtectedRoute';
import DefaultRoute from '@/components/DefaultRoute';
import Sidebar from '@/components/Sidebar';
import { Routes, Route, Navigate } from 'react-router-dom';
import Home from '@/pages/home/Index';
import User from '@/pages/user/Index';
import Design from '@/pages/design/Index';
import Template from '@/pages/Template/Index';
import SourceMaterial from '@/pages/sourcematerial/Index';
import Tool from '@/pages/tool/Index';
import Ai from '@/pages/Ai/Index';
import Talk from '@/pages/talk/Index';
import CustomerService from '@/pages/customer-service/Index';
import Login from '@/pages/login/Index';
import WechatCallback from '@/pages/wechat-callback/Index';
import WechatTest from '@/pages/wechat-test/Index';
import LoginTest from '@/pages/login-test/Index';
import Unauthorized from '@/pages/unauthorized/Index';
import { Permission } from '@/types/auth';

function App() {
  return (
    <AuthProvider>
      <Routes>
        <Route path="/" element={<Navigate to="/home" replace />} />
        <Route path="/login" element={
          <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            overflow: 'hidden',
            zIndex: 9999
          }}>
            <Login />
          </div>
        } />
        <Route path="/wechat-callback" element={
          <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            overflow: 'hidden',
            zIndex: 9999
          }}>
            <WechatCallback />
          </div>
        } />
        <Route path="/wechat-test" element={
          <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            overflow: 'hidden',
            zIndex: 9999
          }}>
            <WechatTest />
          </div>
        } />
        <Route path="/login-test" element={
          <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            overflow: 'hidden',
            zIndex: 9999
          }}>
            <LoginTest />
          </div>
        } />
        <Route path="/unauthorized" element={<Unauthorized />} />
        <Route path="/*" element={
          <DefaultRoute>
            <div className="app-layout">
              <Sidebar />
              <div className="app-main">
                <Routes>
                  <Route path="/" element={<Navigate to="/home" replace />} />
                  <Route path="/home" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_HOME}>
                      <Home />
                    </ProtectedRoute>
                  } />
                  <Route path="/user" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_USER}>
                      <User />
                    </ProtectedRoute>
                  } />
                  <Route path="/design" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_CREATE}>
                      <Design />
                    </ProtectedRoute>
                  } />
                  <Route path="/template" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_TEMPLATE}>
                      <Template />
                    </ProtectedRoute>
                  } />
                  <Route path="/sourcematerial" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_SOURCE}>
                      <SourceMaterial />
                    </ProtectedRoute>
                  } />
                  <Route path="/tool" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_TOOL}>
                      <Tool />
                    </ProtectedRoute>
                  } />
                  <Route path="/ai" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_AI}>
                      <Ai />
                    </ProtectedRoute>
                  } />
                  <Route path="/talk" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_TALK}>
                      <Talk />
                    </ProtectedRoute>
                  } />
                  <Route path="/customer-service" element={
                    <ProtectedRoute requiredPermission={Permission.VIEW_CUSTOMER_SERVICE}>
                      <CustomerService />
                    </ProtectedRoute>
                  } />
                </Routes>
              </div>
            </div>
          </DefaultRoute>
        } />
      </Routes>
    </AuthProvider>
  )
}

export default App
